<template>
  <div>
    <h3>审批信息</h3>
    <zm-form inline size="small">
      <el-row :gutter="10">
        <el-col :span="8">
          <zm-form-item label="提交人员:">{{ info.sponsorName }}</zm-form-item>
        </el-col>
        <el-col :span="8">
          <zm-form-item label="所属部门:">
            {{ info.sponsorDepartmentName }}
          </zm-form-item>
        </el-col>
        <el-col :span="8">
          <zm-form-item label="提交时间:">{{ info.sponsorTime }}</zm-form-item>
        </el-col>
      </el-row>

      <!-- 审批通过 -->
      <template v-if="logData.effectNodeData && logData.effectNodeData.length">
        <el-collapse v-model="activeNamesEffect">
          <el-collapse-item
            v-for="(item, index) in logData.effectNodeData"
            :key="`${index}effect`"
            :name="`${index + 1}`"
          >
            <template slot="title">
              <span class="fc-success pl15 fs16 label">审批记录</span>
            </template>
            <el-steps
              direction="vertical"
              :active="stepsActive"
              finish-status="success"
              process-status="finish"
              class="record-step"
            >
              <el-step>
                <template slot="title">
                  <span class="record-step-title">{{ item.levelNode }}级审批</span>
                </template>
                <template slot="description">
                  <step-item
                    :item="ch"
                    :level-node="item.levelNode"
                    v-for="(ch, chIndex) in item.approveNode"
                    :key="chIndex"
                  >
                  </step-item>
                  <copy-item :list="item.copyNode"></copy-item>
                </template>
              </el-step>
            </el-steps>
          </el-collapse-item>
        </el-collapse>
      </template>
      <!-- 撤销、驳回记录 -->
      <template v-if="logData.cancelNodeData && logData.cancelNodeData.length">
        <el-collapse v-model="activeNamesCancel">
          <el-collapse-item
            v-for="(item, index) in logData.cancelNodeData"
            :key="`${index}cancel`"
            :name="`${index + 1}`"
          >
            <template slot="title">
              <span class="fc-orange pl15 fs16 label">{{
                item.nodeData.nodeType === "4" ? "撤销记录" : "驳回记录"
              }}</span>
            </template>
            <!-- nodeType=4 撤销;nodeType=5 驳回 -->

             <el-steps
             v-if="item.nodeData.nodeType === '4'"
              direction="vertical"
              class="back-record-step"
            >
            <el-step status="success">
              <template slot="title">
                  <span class="back-record-step-title">{{ +(item.nodeData.linkLevel) }}级审批</span>
                </template>
              <template slot="description">
                <step-item
                :item="item.nodeData"
                :key="index"
                :is-cancel="true"
                >
                </step-item>
              </template>
            </el-step>
            </el-steps>
            <el-steps
              direction="vertical"
              :active="stepsActive"
              finish-status="success"
              process-status="finish"
              class="record-step"
            >
              <el-step
                v-for="(_item, _index) in item.childNodeData"
                :key="_index + 'child'"
              >
              <template slot="title">
                  <span class="record-step-title">{{ _item.levelNode }}级审批</span>
                </template>
                <template slot="description">
                  <step-item
                    :item="ch"
                    :level-node="_item.levelNode"
                    v-for="(ch, chIndex) in _item.approveNode"
                    :key="chIndex + 'approveNode'"
                    :is-cancel="true"
                  >
                  </step-item>
                  <copy-item :list="_item.copyNode"></copy-item>
                </template>
              </el-step>
            </el-steps>
          </el-collapse-item>
        </el-collapse>
      </template>
    </zm-form>
  </div>
</template>

<script>
import StepItem from './StepItem'
import CopyItem from './CopyItem'
import approveApi from '@/api/src/approve'
import { PROCESS_TYPE } from '@/model/index'
export default {
  name: 'ApproveRecord',
  components: { StepItem, CopyItem },
  mixins: [],
  props: {
    processType: {
      type: [String, Number],
      default: '1'
    },
    businessId: {
      type: String,
      default: '1'
    },
    // 特殊价格配置才需要传草稿ID
    draftId: {
      type: String,
      default: ''
    },
    checkStatus: {
      type: String,
      default: ''
    },
    isLoadList: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      info: {},
      logData: {
        effectcurrentNode: '1',
        effectNodeData: []
      },
      stepsActive: 0,
      activeNamesEffect: '1',
      activeNamesCancel: '1'
    }
  },
  computed: {},
  watch: {
    isLoadList (v) {
      this.getApproveLogList()
    }
  },
  mounted () {
    this.getApproveLogList()
  },
  methods: {
    async getApproveLogList () {
      const params = {
        businessId: this.businessId,
        processType: this.processType + '',
        checkStatus: this.checkStatus
      }
      if (this.draftId) {
        params.draftId = this.draftId
      }
      const res = await approveApi.getLogList(params)
      this.info = res.info || {}
      this.logData = res.logData || {}
      console.log(this.logData, 'logData')
      this.stepsActive = +res.logData.effectCurrentNode
      // 默认展开所有审批流
      if (res.logData.effectNodeData && res.logData.effectNodeData.length > 0) {
        this.activeNamesEffect = res.logData.effectNodeData.map((i, index) => {
          return (index + 1).toString()
        })
      }
      if (res.logData.cancelNodeData && res.logData.cancelNodeData.length > 0) {
        this.activeNamesCancel = res.logData.cancelNodeData.map((i, index) => {
          return (index + 1).toString()
        })
      }
    }
  }
}
</script>
<style lang="scss">
@import "~styles/variables";
.record-step,.back-record-step {
  &-title{
    color:white;
    padding: 2px 8px;
    background-color: $theme;
    border-radius: 5px;
  }
  &-title:before{
    content:'';
    width:0;
    height:0;
    position:absolute;
    left: 27px;
    top:4px;
    border-right:solid 8px $theme;
    border-top:solid 8px transparent;
    border-bottom:solid 8px transparent;
  }

  .el-step__icon-inner{
    display: none;
  }
  .el-step.is-vertical .el-step__line{
    left:7px;
  }
  .el-step.is-vertical .el-step__title{
    line-height:25px;
  }
  .el-step__icon{
    width:15px;
    height:15px;
  }
  .el-step__description{
    padding-right:0
  }
  .el-step__description.is-success{
    margin-top:3px;
    color: #666;
  }
  .el-step__description.is-finish,.el-step__description.is-wait{
    margin-top:3px;
    color: #666;
  }
  .is-success{
    .el-step__icon.is-text{
      border-color: $theme;
    }
  }
  .is-finish,.is-wait{
    .el-step__icon.is-text{
      background-color:$theme;
      border-color:$theme;
    }
    .el-step__icon.is-text:before{
      content:'';
      width:11px;
      height:11px;
      position:absolute;
      left:0;
      top:0;
      background-color: white;
      border-radius: 50%;
    }
  }
  .el-step__title.is-success{
    color: $theme;
  }
  .el-step__head.is-success{
    color: $theme;
    .el-step__icon{
      background: $theme;
    }
  }
}
.back-record-step{
  &-title{
    background-color: $theme-warning;
  }
  &-title:before{
    border-right:solid 8px $theme-warning;
  }
  .is-success{
    .el-step__icon.is-text{
      border-color: $theme-warning;
    }
  }
  .el-step__head.is-success{
    color:  $theme-warning;
    .el-step__icon{
      background:  $theme-warning;
    }
  }
}

</style>
